export default function Sidebar({ activeTab, setActiveTab }) {
  const menuItems = [
    { key: 'workspace', label: 'Workspace' },
    { key: 'billing', label: 'Plan & Billing' },
    { key: 'account', label: 'Account Info' }
  ]

  return (
    <div className="space-y-3">
      <h3 className="text-[14px] text-[#95a1b8] uppercase tracking-wide mb-2">Menu</h3>
      {menuItems.map((item) => (
        <div
          key={item.key}
          onClick={() => setActiveTab(item.key)}
          className={`w-full text-left px-4 py-3 text-[16px] rounded-xl border-solid cursor-pointer ${
            activeTab === item.key
              ? 'border-[rgba(124,92,255,.5)] bg-[#1a1f2b] text-white'
              : 'border-[#1f2533] bg-[#0f131c] text-gray-400 hover:bg-[#141a28] hover:text-white :hover:border-[rgba(124,92,255,.5)]'
          } transition-colors duration-200`}>
          {item.label}
        </div>
      ))}
    </div>
  )
}
